import React from 'react';
import {
    Button, Space, Modal,
    Form, Checkbox, notification,
    Input, InputNumber, message, Select,
} from 'antd';
import {
    ExclamationCircleOutlined
} from '@ant-design/icons';
import { connect } from 'umi';
import request from '@/utils/request';
import CateComp from '@/components/CategoryComponent';
import { WhseSelect } from '@/components/FormItemSelect';

const { confirm } = Modal;
const apiURL = "/api/services/app/DMRActn/";
const currentControl = "DMRActn";
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            data: {},
        }
    }
    formRef: any = React.createRef();
    componentDidMount() {
        this.props.onRef(this)
        if (this.props.data) {
            this.setState({ data: this.props.data })
            this.formRef.current.setFieldsValue({ model: this.props.data });
        }
    }
    onFinish = (values: any) => {
        this.save(values.model)
    }
    save = (model: any) => {
        var act = 'New'
        var method = 'POST'
        if (model.id) {
            act = 'Modify'
        }
        if (model.actionType === "accept" && (!model.warehouseCode || !model.binNum)) {
            message.error('让步接收请选择仓库和库位！');
            return;
        }
        this.setState({ loading: true });
        request(apiURL + act, {
            method,
            data: model
        }).then((response) => {
            if (response) {
                if (response.success) {
                    message.success('保存成功！');
                    this.formRef.current.setFieldsValue({ model: response.result });
                    this.props.refreshData(model.dmrNum)
                }
                else {
                    notification.error({
                        message: response.error.message,
                        description: response.error.details,
                    });
                }
                this.setState({ loading: false });
            }
        });
    }
    delObj = () => {
        const { data } = this.state;
        let _this = this
        confirm({
            title: '警告',
            icon: <ExclamationCircleOutlined />,
            content: '删除后将不可恢复，确定删除？',
            onOk() {
                _this.props.dispatch({
                    type: 'Abp/delete',
                    payload: { id: data.id },
                    control: currentControl
                }).then(() => {
                    _this.formRef.current.resetFields()
                    _this.props.refreshData(data.packSlip)
                })
            },
        });

    }
    render() {
        const { loading } = this.state
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
        };
        return (
            <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                <Form.Item name={['model', 'id']} hidden={true}>
                    <Input />
                </Form.Item>
                <Form.Item label="DMR号" name={['model', 'dmrNum']} rules={[{ required: true }]}>
                    <Input disabled style={{ width: 100 }} />
                </Form.Item>
                <Form.Item label="物料编码">
                    <Input.Group compact>
                        <Form.Item
                            noStyle
                            name={['model', 'partNum']}
                            rules={[{ required: true, message: "请输入物料编码" }]}>
                            <Input style={{ width: 150 }} disabled />
                        </Form.Item>
                        <Form.Item noStyle name={['model', 'ium']}>
                            <Input style={{ width: 80 }} placeholder="单位" disabled />
                        </Form.Item>
                    </Input.Group>
                </Form.Item>
                <Form.Item name={['model', 'partDescription']} label="物料描述" rules={[{ required: true }]}>
                    <Input disabled />
                </Form.Item>
                <Form.Item name={['model', 'quantity']} label="处理数量" rules={[{ required: true }]}>
                    <InputNumber disabled />
                </Form.Item>
                <Form.Item name={['model', 'actionType']} label="处理方式" rules={[{ required: true }]}>
                    <Select>
                        <Select.Option value="accept">让步接收</Select.Option>
                        <Select.Option value="debit">请求供应商借款</Select.Option>
                    </Select>
                </Form.Item>
                <CateComp layout="原因代码" width={200} name={['model', 'reasonCode']} label="原因代码" />
                <Form.Item label="入料仓库" style={{ marginBottom: 0 }}>
                    <Input.Group compact>
                        <WhseSelect width={120} name={['model', 'warehouseCode']} placeholder="入料仓库" />
                        <Form.Item name={['model', 'binNum']}>
                            <Input style={{ width: 100 }} placeholder="库位" />
                        </Form.Item>
                    </Input.Group>
                </Form.Item>
                <Form.Item
                    wrapperCol={{ offset: 5 }}
                    name={['model', 'openDMR']}
                    valuePropName="checked">
                    <Checkbox disabled>未结</Checkbox>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 5 }}>
                    <Space>
                        <Button key="1" type="primary" htmlType="submit" loading={loading}>保存</Button>
                        <Button key="2" danger disabled={!this.state.data.id} onClick={this.delObj}>删除</Button>
                    </Space>
                </Form.Item>
            </Form>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(ViewPage);